<template>
	<div>
		<x-header :left-options="{showBack: false}">登录</x-header>
		<group>
			<selector v-model="value1" placeholder="请选择" title="下拉框" :options="plainList" @on-change="onChange"></selector>
			<x-input title="账户" type="text" name="username" v-model="user" placeholder="请输入账户"></x-input>
			<x-input title="密码" type="password" name="password" v-model="passWord" placeholder="请输入账户"></x-input>
		</group>
		<box gap="10px 10px">
			<flexbox>
				<flexbox-item>
					<x-button type="primary" action-type="button" @click.native="cancel">取消</x-button>
				</flexbox-item>
				<flexbox-item @click.prevent="confirm">
					<x-button type="primary" @click.native="confirm">确认</x-button>
				</flexbox-item>
			</flexbox>
		</box>
	</div>
</template>

<script>
	import { XHeader, Group, Selector, XInput, XButton, Flexbox, FlexboxItem, Box } from 'vux'

	export default {
		components: {
			XHeader,
			Group,
			Selector,
			XInput,
			XButton,
			Flexbox,
			FlexboxItem,
			Box,

		},
		data() {
			return {
				msg: 'Hello World!',
				user: '',
				passWord: '',
				value1: '广西',
				plainList: ['广东', '广西'],
			}
		},
		methods: {
			onChange(val) {
				console.log(val)
			},
			cancel(){
				console.log("取消")
			},
			confirm(){
				console.log("确认");
				this.$router.push("/table");
			}
		}
	}
</script>

<style>

</style>